<template>
  <n-space style="margin-left: 5%;" align="center">
    <n-switch :round="false" size="large">
        <template #unchecked>显示全部</template>
        <template #checked>仅显示自己</template>
    </n-switch>
    <n-input placeholder="搜索学号" style="width: 500px;">
      <template #prefix><n-icon><search-icon /></n-icon></template>
    </n-input>
    <n-button type="primary">搜索</n-button>
    </n-space>
    <n-data-table :columns="columns" :data="problems" :pagination="pagination" style="margin-top: 20px; margin-left: 5%; width: 90%;"/>
</template>

<script lang="ts">
  import { defineComponent, ref, h } from "@vue/runtime-core";
  import { SearchOutline as SearchIcon } from "@vicons/ionicons5"
  import { NTag, NButton, NSwitch } from "naive-ui";
  import router from '@/router';

  interface Row{
    commitNo: number;
    account: string;
    questionNo: string;
    language: string;
    status: string;
    timeConsume: string;
    storageConsume: string;
    commitTime: string;
  }

  const createColumns = () => {
    return [
    {
      title: '提交编号',
      key: 'commitNo',
      align: 'center',
    },
    {
      title: '学号',
      key: 'account',
      align: 'center',
      render(row: Row){
        const btn = h(NButton, {
          text: true,
          onClick: () => router.push('/user/' + row.account)
        },
        {default: () => row.account})
        return btn;
      }
    },
    {
        title: '题目编号',
        key: 'questionNo',
        align: 'center',
      render(row: Row){
        const btn = h(NButton, {
          text: true,
          onClick: () => router.push('/questions/' + row.account)
        },
        {default: () => row.questionNo})
        return btn;
      }
    },
    {
        title: '提交语言',
        key: "language",
        align: 'center'
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      render (row: Row) {
        const status = h(NTag, {
			type: row.status == "答案正确" ? "success" : "error"
		},
		{default: () => row.status})
        return status;
      }
    },
    {
        title: '时间消耗',
        key: 'timeConsume',
        align: 'center'
    },
    {
        title: '内存消耗',
        key: 'storageConsume',
        align: 'center'
    },
	{
		title: "提交时间",
		key: 'commitTime',
		align: 'center'
	},
  ]
}

const createData = () => [
  {
    key: 0,
    commitNo: 10000001,
    account: '201904020227',
    questionNo: '1001',
    status: "答案错误",
    language: 'Python',
    timeConsume: '32ms',
    storageConsume: '5M',
	commitTime: "2021-12-9 15:20:03",
  },
  {
    key: 1,
    commitNo: 10000002,
    account: '201904020227',
    questionNo: '1001',
    status: "答案正确",
    language: 'C++',
    timeConsume: '32ms',
    storageConsume: '1M',
	commitTime: "2021-12-9 15:25:12",
  },
]

  export default defineComponent({
    components: { SearchIcon, NSwitch },
    setup(){
      return {
        value: ref(null),
        problems: createData(),
        columns: createColumns(),
        pagination: { pageSize: 10 },
      }
    },
  })
</script>